<template>
  <div class="foot">
    <van-tabbar
      v-model="active"
      @change="onChange"
    >
      <van-tabbar-item
        icon="wap-home"
        to="/home"
      >首页</van-tabbar-item>
      <van-tabbar-item
        icon="graphic"
        to="/shuma"
      >数码</van-tabbar-item>
      <!-- <van-tabbar-item icon="browsing-history">发现</van-tabbar-item>
      <van-tabbar-item icon="send-gift">应用游戏</van-tabbar-item> -->
      <van-tabbar-item
        icon="manager"
        to="/user"
      >我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Foot",
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onChange() {
      switch (this.active) {
        case 0:
          this.$store.state.active = 0;
          break;
        case 1:
          this.$store.state.active = 1;
          break;
        case 2:
          this.$store.state.active = 2;
          break;
        case 3:
          this.$store.state.active = 3;
          break;
        case 4:
          this.$store.state.active = 4;
          break;

        default:
          break;
      }
    },
  },
  created() {
    switch (this.$router.history.current.fullPath) {
      case "/home":
        this.active = 0;
        break;
      case "/shuma":
        this.active = 1;
        break;
      case "/user":
        this.active = 2;
        break;
      default:
        this.active = 0;
    }
  },
};
</script>

<style scoped>
.foot {
  margin-top: 75px;
}
</style>